{include file="/shopro/common/script" /}

<style>
    .agent-detail .agent-detail-scrollbar>.el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .agent-detail .agent-detail-scrollbar>.el-scrollbar__bar.is-horizontal {
        display: none;
    }

    .agent-detail .agent-content {
        height: 450px;
        line-height: 1;
        padding: 20px;
        background: var(--sa-table-header-bg);
        border-radius: 8px;
        margin: 0 0 20px;
    }

    .agent-detail .user-content .refresh {
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-font);
        cursor: pointer;
    }

    .agent-detail .user-content .refresh .el-icon {
        font-size: 16px;
        margin-right: 4px;
    }

    .agent-detail .user-content .nickname {
        line-height: 22px;
        font-size: 16px;
        font-weight: 500;
        color: var(--sa-subtitle);
    }

    .agent-detail .user-content .status {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        cursor: pointer;
    }

    .agent-content .el-form-item--small {
        margin-bottom: 8px;
    }

    .agent-detail .user-content .commission-item {
        width: 30%;
        line-height: 18px;
        font-size: 14px;
        font-weight: 500;
    }

    .agent-detail .user-content .commission-item .title {
        height: 24px;
        line-height: 24px;
        font-size: 12px;
        font-weight: 400;
        margin-bottom: 4px;
    }

    .agent-detail .apply-content .sa-image {
        width: 140px;
        height: 90px;
    }

    .agent-detail .dashboard-content {
        height: fit-content;
    }

    .agent-detail .dashboard-content .title {
        height: 18px;
        line-height: 18px;
        font-size: 14px;
        font-weight: 500;
        color: var(--sa-title);
        margin-bottom: 16px;
    }

    .agent-detail .dashboard-content>.el-col {
        border-bottom: 1px dashed var(--sa-border);
        margin-bottom: 16px;
        padding-bottom: 8px;
    }

    .agent-detail .dashboard-content>.el-col:last-of-type {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .agent-detail .dashboard-content .item {
        margin-bottom: 16px;
    }

    .agent-detail .dashboard-content .left {
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-subfont);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .agent-detail .dashboard-content .item {
        line-height: 22px;
        font-size: 18px;
        font-weight: 500;
        color: var(--sa-font);
    }

    .agent-detail .dashboard-content .unit {
        font-size: 12px;
        font-weight: 400;
        color: var(--sa-font);
        margin-left: 4px;
    }

    .agent-detail .rewards-item {
        margin-right: 8px;

    }

    .agent-detail .rewards-item:last-of-type {
        margin-right: 0;
    }
</style>

<div id="detail" class="agent-detail panel panel-default panel-intro" v-cloak>
    <el-container class="panel-block">
        <el-main>
            <el-scrollbar class="agent-detail-scrollbar" height="100%">
                <el-row :gutter="20">
                    <el-col class="sa-col-24" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-row class="dashboard-content agent-content">
                            <el-col :span="24">
                                <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                    <div class="left">用户：</div>
                                    <div class="right">
                                        <sa-user-profile :user="state.data.user" :id="state.data.user_id" :isavatar="false">
                                        </sa-user-profile>
                                    </div>
                                </el-col>
                            </el-col>

                            <el-col :span="24">
                                <el-row>
                                <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                    <div class="left">金额：</div>
                                    <div class="right">
                                        {{ state.data.money }}
                                        <span class="unit">元</span>
                                    </div>
                                </el-col>
                                <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                    <div class="left"  v-if="state.data.money>=0">订单pv值：</div>
                                    <div class="left"  v-if="state.data.money<0">奖金池金额：</div>
                                    <div class="right">
                                        {{ state.data.order_pv }}
                                    </div>
                                </el-col>
                                <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                    <div class="left" v-if="state.data.money>=0">计入奖金池比例：</div>
                                    <div class="left" v-if="state.data.money<0">分红比例：</div>
                                    <div class="right">
                                        {{ state.data.ratio }}
                                        <span class="unit">%</span>
                                    </div>
                                </el-col>
                            </el-row>
                            </el-col>
                            <el-col :span="24" v-if="state.data.money<0">
                                <el-row>
                                    <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                        <div class="left">大市场扣除：</div>
                                        <div class="right">
                                            {{ state.data.order_details.big_market }}
                                        </div>
                                    </el-col>
                                    <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                        <div class="left">结余：</div>
                                        <div class="right">
                                            {{ state.data.order_details.big_money }}
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24" v-if="state.data.money<0">
                                <el-row>
                                    <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                        <div class="left">小市场扣除：</div>
                                        <div class="right">
                                            {{ state.data.order_details.small_market }}
                                        </div>
                                    </el-col>
                                    <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                        <div class="left">结余：</div>
                                        <div class="right">
                                            {{ state.data.order_details.small_money }}
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24">
                                <el-row>
                                    <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                        <div class="left">备注：</div>
                                        <div class="right">
                                            {{ state.data.momo }}
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24">
                                <el-row>
                                    <el-col class="item" :xs="12" :sm="8" :md="8" :lg="8" :xl="8">
                                        <div class="left">时间：</div>
                                        <div class="right">
                                            {{ state.data.createtime }}
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </el-main>
    </el-container>
</div>